@import "variable";
@import "../../dist/css/sprite";

.index-banner{
  background: url("../images/index-banner.jpg") center;
  height: 666px;
  //background-size: contain;
  text-align: center;
  .index-banner-text{
    padding-top: 155px;
    .text-big{
      font-size: 58px;
      color: #32e2aa;
      line-height:1.2;
    }
    .text-small{
      font-size: 32px;
      color: #fff;
      line-height:2;
    }
  }
  .index-login-btn{
    display: inline-block;
    font-size: 24px;
    margin-top: 50px;
    .line-height(58px);
    width: 198px;
    border-radius: 10px;
    border: 1px solid #fff;
    color: #fff;
    transition: .2s;
    &:hover{
      background-color: @blue;
      border-color: @blue;
    }
  }
}

.index-2{
  height: 490px;
  .index-2-list{
    padding-top: 50px;
    ul{
      width: 1170px;
      margin: 0 auto;
    }
    li{
      position: relative;
      text-align: center;
      font-size: 20px;
      float: left;
      margin: 0 25px;
      div{
        width: 145px;
        height: 145px;
        margin: 0 auto;
        border-radius: 50%;
        border: 2px solid #e5e5e5;
        transition: .2s;
        i{
          display: block;
          margin: 32px 0 0 33px;
        }
        .icon1{
          .sprite(@icon1);
        }
        .icon2{
          .sprite(@icon2);
        }
        .icon3{
          .sprite(@icon3);
        }
        .icon4{
          .sprite(@icon4);
        }
        .icon5{
          .sprite(@icon5);
        }
        .icon6{
          .sprite(@icon6);
        }
      }
      p{
        font-size: 24px;
        line-height: 3;
      }
      &:hover{
        div{
          background-color: @blue;
          border-color: @blue;
          .icon1{
            .sprite(@icon1h);
          }
          .icon2{
            .sprite(@icon2h);
          }
          .icon3{
            .sprite(@icon3h);
          }
          .icon4{
            .sprite(@icon4h);
          }
          .icon5{
            .sprite(@icon5h);
          }
          .icon6{
            .sprite(@icon6h);
          }
        }
      }
    }
  }
}
.index-2-text{
  text-align: center;
  padding-top: 70px;
  p{
    font-size: 24px;
    line-height: 2;
    letter-spacing: 1px;
  }
  i{
    display: inline-block;
    width: 100px;
    height: 4px;
    background-color: @blue;
  }
}

.index-3{
  position: relative;
  background: url("../images/index-3bg.jpg") no-repeat center;
  background-size: cover;
  height: 951px;
  .window{
    position: relative;
    background: url("../images/index-3-pc.png") no-repeat center;
    background-size: 100%;
    width:824px;
    height: 700px;
    margin: 0 auto;
    .web-list{
      position: absolute;
      top: 142px;
      left: 100px;
      width: 624px;
      height: 390px;
      overflow: hidden;
      li{
        position: absolute;
        left: 624px;
        top:0;
        width: 100%;
        height: 100%;
        img{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .icon-list {
    position: relative;
    width: 610px;
    margin: 0 auto;
    >i{
      position: absolute;
      display: block;
      width: 21px;
      height: 38px;
      top: 22%;
      cursor: pointer;
    }
    i.prev {
      left: -30px;
      opacity:.3;
      .sprite(@left-arrow);
    }
    i.next {
      right: -30px;
      .sprite(@right-arrow);
    }
    .icon-box {
      position: relative;
      overflow: hidden;
      width: 525px;
      margin: 0 auto;
      ul.move{
        transform: translateX(-420px);
      }
      ul {
        transition:transform .3s ease-in-out;
        width: 980px;
        li {
          float: left;
          text-align: center;
          font-size: 16px;
          color: #fff;;
          margin-right: 35px;
          line-height: 3;
          cursor: pointer;
          &:hover .btn-img{
            background-color:@blue;
            border-color: @blue;
            .btn-one{
              .sprite(@icon7h)
            }
            .btn-two{
              .sprite(@icon8h)
            }
            .btn-thr{
              .sprite(@icon9h)
            }
            .btn-four{
              .sprite(@icon10h)
            }
            .btn-five{
              .sprite(@icon11h)
            }
            .btn-six{
              .sprite(@icon12h)
            }
            .btn-seven{
              .sprite(@icon13h)
            }
          }
          .btn-img {
            width: 105px;
            height: 105px;
            border: 2px solid #e5e5e5;
            border-radius: 50%;
            margin: 0 auto;
            transition: .3s ease-in-out;
            i{
              display: block;
              margin-top: 16px;
              margin-left: 16px;
            }
            .btn-one{
              .sprite(@icon7)
            }
            .btn-two{
              .sprite(@icon8)
            }
            .btn-thr{
              .sprite(@icon9)
            }
            .btn-four{
              .sprite(@icon10)
            }
            .btn-five{
              .sprite(@icon11)
            }
            .btn-six{
              .sprite(@icon12)
            }
            .btn-seven{
              .sprite(@icon13)
            }
          }
        }
        li.on .btn-img{
          background-color: @blue;
          border-color: @blue;
          .btn-one{
            .sprite(@icon7h)
          }
          .btn-two{
            .sprite(@icon8h)
          }
          .btn-thr{
            .sprite(@icon9h)
          }
          .btn-four{
            .sprite(@icon10h)
          }
          .btn-five{
            .sprite(@icon11h)
          }
          .btn-six{
            .sprite(@icon12h)
          }
          .btn-seven{
            .sprite(@icon13h)
          }
        }
      }
    }
  }

}

.company-banner{
  background: url("../images/company-banner.jpg") no-repeat center;
  height:310px;
}

//company-group
.city{
  position: relative;
  /*.city-box{
    padding: 15px;
    margin:10px auto;
    border: 1px solid #d9dbde;
    em{
      font-size: 16px;
      color: #666;
    }
    a{
      font-size: 14px;
      padding-right: 19px;
      line-height: 30px;
      color: #08c;
    }
  }*/
  .city-search{
    padding: 15px 30px;
    border: 1px solid #e0f3fe;
    margin: 50px auto;
    background-color: #f3fbff;
    border-radius: 5px;
    box-shadow: 0 0 7px rgba(181,225,252,.42);
    .search-head{
      padding-top: 18px;
      height: 90px;
      border-bottom:1px dashed #d9dbde;
      margin-bottom: 10px;
      p{
        float: left;
        font-size: 24px;
        border-left: 5px solid @blue;
        padding-left: 20px;
        line-height: 1;
        margin-top: 5px;
      }
      .search-box{
        float: right;
        width: 290px;
        height: auto;
        .search-text{
          float: left;
          display: block;
          border: 1px solid #e0f3fe;
          font-size: 14px;
          width: 195px;
          height: 40px;
          line-height: 40px;
          text-indent: 5px;
        }
        .search-btn{
          float: right;
          display: block;
          width: 80px;
          height: 40px;
          line-height: 40px;
          border-radius: 5px;
          text-align: center;
          font-size: 16px;
          color: #fff;
          background-color: @blue;
        }
      }
    }
    .search-result{
      padding: 15px;
      >a{
        float: left;
        width: 33.333%;
        font-size: 14px;
        line-height: 30px;
        transition: .2s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 20px;
        &:hover{
          color: @blue;
        }
      }
    }
  }
}


//about
.about-banner{
  background: url("../images/about-bg1.jpg") no-repeat center;
  height:666px;
  >p{
    text-align: center;
    font-size: 44px;
    padding-top: 70px;
  }
}

.about-2{
  background-color: #ececee;
  text-align: center;
  padding-bottom: 50px;
  .index-2-text{
    margin-bottom: 20px;
    i{
      width: 70px;
      height: 3px;
      border-radius: 2px;
    }
  }
  span{
    display: block;
    font-size: 16px;
    line-height: 2;
  }
}
.about-3{
  .index-2-text{
    margin-bottom: 20px;
    i{
      width: 70px;
      height: 3px;
      border-radius: 2px;
    }
  }
  .about-3-list{
    ul{
      width: 1155px;
      margin: 0 auto;
      padding-top: 20px;
      padding-bottom: 70px;
    }
    li{
      position: relative;
      text-align: center;
      font-size: 20px;
      float: left;
      margin: 0 10px;
      div{
        width: 145px;
        height: 80px;
        margin: 0 auto;
        i{
          display: block;
          margin: 0 auto;
        }
        .icon1{
          .sprite(@ys1);
        }
        .icon2{
          .sprite(@ys2);
        }
        .icon3{
          .sprite(@ys3);
        }
        .icon4{
          .sprite(@ys4);
        }
        .icon5{
          .sprite(@ys5);
        }
        .icon6{
          .sprite(@ys6);
        }
        .icon7{
          .sprite(@ys7);
        }
      }
      p{
        font-size: 20px;
        line-height: 1.5;
      }
    }
  }
}
.about-bg2{
  background: url("../images/about-bg2.jpg") no-repeat center;
  height: 714px;
  .index-2-text{
    margin-bottom: 20px;
    padding-top: 50px;
    span{
      display: block;
    }
    i{
      width: 70px;
      height: 3px;
      border-radius: 2px;
    }
  }
  .subject-panels{
    width: 1000px;
    margin: 80px auto 0;
    >div{
      width: 435px;
      h4{
        height: 75px;
        line-height: 75px;
        background-color: @blue;
        opacity:.9;
        font-weight: 400;
        font-size: 24px;
        color: #fff;
        text-align: center;
        position: relative;
        &:before{
          content: '';
          display: block;
          position: absolute;
          bottom: -24px;
          left: 200px;
          border-top: 24px solid @blue;
          border-left: 17px solid transparent;
          border-right: 17px solid transparent;
        }
      }
      p{
        margin-top: 24px;
        height: 280px;
        padding: 32px 48px;
        font-size: 20px;
        line-height: 2;
        text-align: left;
        letter-spacing: 1px;
        background-color: #fff;
      }
    }
  }
}
.about-bg3{
  background: url("../images/about-bg3.jpg") no-repeat center;
  height: 901px;
  padding-top: 80px;
  .about-bg4{
    background: url("../images/about-bg4.png") no-repeat center;
    height: 716px;
  }
}